<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #first {
            width: 600px;
            height: 300px;
            border: 1px black solid;
        }
        
        li {
            list-style: none;
            float: left;
            padding: 15px;
            padding-left: 10px;
        }
        
        div {
            float: left;
            font-size: 5px;
        }
        
        .bottom {
            color: cornflowerblue;
        }
        
        img {
            border: 1px black solid;
            padding: 5px;
            border-radius: 5%;
        }
        
        b {
            display: inline-block;
            margin-left: 50px;
        }
        
        #span {
            display: inline-block;
            margin-left: 25px;
        }
    </style>
    <style>

    </style>
</head>

<body>
    <div id="first">
        <b>摄影社区热门小镇</b>
        <div>
            <ul>
                <li>
                    <div><img src="pic_01.jpg" alt=""></div>
                    <div class="top">
                        <p class="bottom">风景狙击手</p>
                        <p>成员:80</p>
                        <p>作品:276</p>
                    </div>
                </li>
                <li>
                    <div><img src="pic_02.jpg" alt=""></div>
                    <div class="top">
                        <p class="bottom">叙事感</p>
                        <p>成员:235</p>
                        <p>作品:116</p>
                    </div>
                </li>
                <li id="span">
                    <div><img src="pic_03.jpg" alt=""></div>
                    <div class="top">
                        <p class="bottom">定焦世界</p>
                        <p>成员:56</p>
                        <p>作品:456</p>
                    </div>
                </li>
                <li>
                    <div><img src="pic_04.jpg" alt=""></div>
                    <div class="top">
                        <p class="bottom">中画幅乐园</p>
                        <p>成员:130</p>
                        <p>作品:239</p>
                    </div>
                </li>
                <li>
                    <div><img src="pic_05.jpg" alt=""></div>
                    <div class="top">
                        <p class="bottom">《卡啪》先锋</p>
                        <p>成员:78</p>
                        <p>作品:125</p>
                    </div>
                </li>
                <li>
                    <div><img src="pic_06.jpg" alt=""></div>
                    <div class="top">
                        <p class="bottom">植物的无声世界</p>
                        <p>成员:235</p>
                        <p>作品:1258</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>

</body>

</html>